<template>
  <div>
    <!-- 面包屑 -->
    <div class="home-breadcrumb">
      <el-breadcrumb separator-class="el-icon-arrow-right">
        <el-breadcrumb-item >系统设置</el-breadcrumb-item>
        <el-breadcrumb-item >用户设置</el-breadcrumb-item>
      </el-breadcrumb>
    </div>

    <!-- 用户信息 -->
    <div class="uset-div">
      <!-- 表格上面的title -->
      <div class="uset-title">
         <!-- <div>用户信息</div> -->
         用户信息
         <el-button type="primary"  @click="dialogFormVisible = true">新增用户</el-button>
      </div>
      <!-- 表格 -->
     <vxe-table
        v-loading="loading"
        border
        show-header-overflow
        show-overflow
        highlight-hover-row
        align="center"
        :data="userTableData">
        <vxe-table-column type="seq" title="序号" width="60"></vxe-table-column>
        <vxe-table-column field="nickName" title="用户姓名"></vxe-table-column>
        <vxe-table-column field="userName" title="登录名"></vxe-table-column>
        <vxe-table-column field="roleName" title="角色"></vxe-table-column>
        <vxe-table-column field="remark" title="备注"></vxe-table-column>
        <vxe-table-column field="createTime" title="创建时间"></vxe-table-column>
        <vxe-table-column title="启用">
          <template v-slot="{ row }">
            <el-switch
              @change="changeUserStatus(row.status,row.userId)"
              v-model="row.status == 1"
              active-color="#13ce66"
              inactive-color="gray">
            </el-switch>
          </template>
        </vxe-table-column>
        <vxe-table-column  title="操作" min-width="200">
          <template v-slot="{ row }">
            <div style="display: flex;justify-content: space-around;align-items: center;">
              <el-button
              type="primary"
              plain
              size="mini"
              icon="el-icon-edit"
              @click="userEditor(row)"
              >
                编辑
              </el-button>
               <el-button type="success" plain size="mini" @click="changeUserPwdVisible(row)">修改密码</el-button>
              <el-button type="danger" plain size="mini" icon="el-icon-delete" @click="deteUserVisible(row.userId)">删除</el-button>
            </div>
          </template>
        </vxe-table-column>
      </vxe-table>

      <!-- 分页 -->
      <div class="uset-pagination">
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="pageInfo.currentPage"
          :page-sizes="[10,20,50,100, 200, 300, 400]"
          :page-size="10"
          layout="total, sizes, prev, pager, next, jumper"
          :total="this.pageInfo.count">
        </el-pagination>
      </div>
    </div>

    <!-- 新增用户 -->
    <el-dialog
    title="新增用户"
    :visible.sync="dialogFormVisible"
    width="35%"
    :close-on-click-modal="false">
      <el-form :model="form">
        <el-form-item label="用户姓名:" :label-width="formLabelWidth">
          <el-input v-model="form.nickName" autocomplete="off"></el-input>
        </el-form-item>

        <el-form-item label="登录名:" :label-width="formLabelWidth">
          <el-input v-model="form.userName" autocomplete="off"></el-input>
        </el-form-item>

        <el-form-item label="角  色:" :label-width="formLabelWidth">
          <!-- <el-input v-model="form.userRole" autocomplete="off"></el-input> -->
          <el-select v-model="form.userRole" placeholder="请选择角色">
            <el-option
              v-for="item in roleList"
              :key="item.roleId"
              :label="item.roleName"
              :value="item.roleId"
              :disabled="item.status">
            </el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="备  注:" :label-width="formLabelWidth">
          <el-input v-model="form.remark" autocomplete="off"></el-input>
        </el-form-item>

        <el-form-item label="密  码:" :label-width="formLabelWidth" >
          <el-input v-model="form.userPass" autocomplete="off" show-password></el-input>
        </el-form-item>

      </el-form>

      <div style="text-align: right;height: 50px;">
        <el-button type="primary" @click="insertUser">确 定</el-button>
        <el-button @click="dialogFormVisible = false">取 消</el-button>
      </div>
    </el-dialog>

    <!-- 用户删除框 -->
    <el-dialog
      title="删除确认"
      :visible.sync="deleteDialogVisible"
      :close-on-click-modal="false"
      width="25%"
      >
      <div style="display: flex;justify-content: center;align-items: center;margin-bottom: 20px;">
        <i class="iconfont" style="color: red;font-size: 40px;margin-right: 30px;">&#xe6d6;</i>
        <div>
          <p>用户<span style="color: red;">删除后不可恢复</span></p></br>
          <p>是否继续?</p>
        </div>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="deleteDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="deleteUser">继续删除</el-button>
      </span>
    </el-dialog>


  <!-- 修改密码 -->
   <el-dialog
    title="修改密码"
    :visible.sync="changePwdVisible"
    width="35%"
    :close-on-click-modal="false">
      <el-form :model="updatePwdForm">
        <el-form-item label="登录名称:" :label-width="formLabelWidth">
          <!-- <el-input v-model="updatePwdForm.userName" autocomplete="off"></el-input> -->
          <span style="font-weight: 600;font-size: 16px;">{{updatePwdForm.userName}}</span>
        </el-form-item>
        <el-form-item label=" 新 密 码:" :label-width="formLabelWidth">
          <el-input v-model="updatePwdForm.userPass" autocomplete="off" show-password></el-input>
        </el-form-item>
      </el-form>

      <div style="text-align: right;height: 50px;">
        <el-button type="primary" @click="changePwd">确 定</el-button>
        <el-button @click="changePwdVisible = false">取 消</el-button>
      </div>
    </el-dialog>

    <!-- 用户编辑 -->
    <el-dialog
    title="用户编辑"
    :visible.sync="userEditorVisible"
    width="35%"
    :close-on-click-modal="false">
      <el-form :model="userEditorForm">
        <el-form-item label="用户姓名:" :label-width="formLabelWidth">
          <el-input v-model="userEditorForm.nickName" autocomplete="off"></el-input>
        </el-form-item>

        <el-form-item label="登录名:" :label-width="formLabelWidth">
          <el-input v-model="userEditorForm.userName" autocomplete="off"></el-input>
        </el-form-item>

        <el-form-item label="角  色:" :label-width="formLabelWidth">
          <!-- <el-input v-model="form.userRole" autocomplete="off"></el-input> -->
          <el-select v-model="userEditorForm.userRole" placeholder="请选择角色">
            <el-option
              v-for="item in roleList"
              :key="item.roleId"
              :label="item.roleName"
              :value="item.roleId"
              :disabled="item.status">
            </el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="备  注:" :label-width="formLabelWidth">
          <el-input v-model="userEditorForm.remark" autocomplete="off"></el-input>
        </el-form-item>
      </el-form>

      <div style="text-align: right;height: 50px;">
        <el-button type="primary" @click="userUpdateAll">确 定</el-button>
        <el-button @click="userEditorVisible = false">取 消</el-button>
      </div>
    </el-dialog>


  </div>
</template>

<script>
  import UserApi from '@/api/userApi'
  import RoleApi from '@/api/roleApi'
  export default {
    data() {
      return {
        // 加载
        loading:false,
        userTableData: [],
        dialogFormVisible:false,
        // 用户删除弹窗
        deleteDialogVisible:false,
        // 用户编辑
        userEditorVisible:false,
        // 用户密码修改弹窗
        changePwdVisible:false,
        formLabelWidth: '80px',

        // 修改密码的value
        updatePwdForm:{
          userPass:'',
          userId:'',
          userName:''
        },

        //表单信息
        form:{
          nickName:"",
          remark:"",
          userName:"",
          userPass:"",
          userRole:"",
          status:'1',
          createTime:""
        },

        // 分页
        pageInfo:{
          // pageNo:1,
          pageSize:10,
          currentPage: 1,
          count:0
        },

        // 删除用户信息
        deleteForm:{
          index:'',
          userId:''
        },
        // 角色列表
        roleList:[],

        // 用户编辑对象
        userEditorForm:{
          userId:'',
          nickName:"",
          remark:"",
          userName:"",
          userRole:"",
        }
      }
    },
    created() {
      this.getUserList()
      this.getRoleList()
    },
    methods:{
      // 获取用户角色
      getRoleList(){
        RoleApi.roleList(1,100).then(res => {
          // 存值
          this.roleList = res.data.data.records
        })
      },
      // 获取用户list
      getUserList(){
        this.loading = true
        UserApi.userList(this.pageInfo).then(res => {
          if(res.status === 200){
            this.userTableData = res.data.data.records

            //赋值数据条数
            this.pageInfo.count = res.data.data.total
            // console.log(this.userTableData)
            this.loading = false
          }else{
            this.$notify.error({
              title: '错误',
              message: '用户数据获取失败'
            });
          }
        })
      },
      // 添加用户
      insertUser(){
        let _this = this
        UserApi.userInsert(_this.form).then(res => {
          if(res.data.status === "200"){            // 成功

            // 重新获取数据
            UserApi.userList(this.pageInfo).then(res => {
              if(res.status === 200){
                this.userTableData = res.data.data.records
              }else{
                this.$notify.error({
                  title: '错误',
                  message: '用户数据获取失败'
                });
              }
            })

            //关闭添加弹窗
            _this.dialogFormVisible = false

            this.$notify({
              title: '成功',
              message: '用户添加成功',
              type: 'success',
              duration:1500
            });

            // 清空编辑框
            this.form.nickName = ''
            this.form.remark = ''
            this.form.userName = ''
            this.form.userPass = ''
            this.form.userRole = ''

          }else if(res.data.status === "403"){                 // 用户存在了
            _this.$notify.error({
              title: '错误',
              message: '用户已经存在',
              duration:1500
            });
          }
        })
      },
      // 分页
      // 每页多少条
      handleSizeChange(val) {
        //赋值
        this.pageInfo.pageSize = val
        // 将页数置为1
        this.pageInfo.currentPage = 1

        //重新获取数据
        UserApi.userList(this.pageInfo).then(res => {
          if(res.status === 200){
            this.userTableData = res.data.data.records
          }else{
            this.$notify.error({
              title: '错误',
              message: '用户数据获取失败'
            });
          }
        })
      },
      // 多少页
      handleCurrentChange(val) {
        //赋值
        this.pageInfo.currentPage = val
        //重新获取数据
        UserApi.userList(this.pageInfo).then(res => {
          if(res.status === 200){
            this.userTableData = res.data.data.records
          }else{
            this.$notify.error({
              title: '错误',
              message: '用户数据获取失败'
            });
          }
        })
      },
      // 删除用户ById
      deteUserVisible(uid){
        // uid
        this.deleteForm.userId = uid
        // 展开弹窗
        this.deleteDialogVisible = true
      },
      // 删除用户ById
      deleteUser(){
        UserApi.userDelete(this.deleteForm.userId).then(res => {
          // 判断是否修改成功
          if(res.data.status === "200"){

            // 关闭弹窗
            this.deleteDialogVisible = false

            //数据总数-1
            this.pageInfo.count -= 1
            // 重新获取数据
            UserApi.userList(this.pageInfo).then(res => {
              if(res.status === 200){
                this.userTableData = res.data.data.records
              }else{
                this.$notify.error({
                  title: '错误',
                  message: '用户数据获取失败'
                });
              }
            })
          }else{
            // 修改失败
           this.$notify.error({
             title: '错误',
             message: '失败！'
           });
          }
        })
      },
      // 修改用户状态
      changeUserStatus(status,userId){
        var _this = this
        //修改状态 取反
        var reverseStatus = (status == 1) ? 0:1
        UserApi.userUpdateStatus(reverseStatus,userId).then(res => {
          // 判断是否修改成功
          if(res.data.status === "200"){
            // 重新获取数据
            //重新获取数据
            UserApi.userList(this.pageInfo).then(res => {
              if(res.status === 200){
                this.userTableData = res.data.data.records
              }else{
                this.$notify.error({
                  title: '错误',
                  message: '用户数据获取失败'
                });
              }
            })
          }
        })
      },
      // 修改密码弹窗
      changeUserPwdVisible(userinfo){
        var _this = this
        // 设置弹窗用户名
        _this.updatePwdForm.userName = userinfo.userName
        _this.updatePwdForm.userId = userinfo.userId

        // 弹窗唤起
        _this.changePwdVisible = true
      },
      // 修改密码
      changePwd(){
        var _this = this
        UserApi.userUpdatePwd(_this.updatePwdForm).then(res => {
          // 判断是否修改成功
          if(res.data.status === "200"){
            // 关闭弹窗
            _this.changePwdVisible = false

            // 清空密码框
            _this.updatePwdForm.userPass = ''

            // 提示成功
            this.$notify({
              title: '成功',
              message: '密码修改成功！',
              type: 'success',
              duration:1500
            });
          }else{
            // 修改失败
           this.$notify.error({
             title: '错误',
             message: '密码修改失败！',
             duration:1500
           });
          }
        })
      },

      // 用户编辑打开弹窗
      userEditor(userInfo){
        this.userEditorForm.userId =userInfo.userId
        this.userEditorForm.remark =userInfo.remark
        this.userEditorForm.userName =userInfo.userName
        this.userEditorForm.userRole =userInfo.userRole
        this.userEditorForm.nickName =userInfo.nickName

        // 打开弹窗
        this.userEditorVisible = true
      },
      // 用户更新
      userUpdateAll(){
        UserApi.userUpdateAll(this.userEditorForm).then(res => {
          if(res.status === 200){
            // 重新获取用户列表
            UserApi.userList(this.pageInfo).then(res => {
              if(res.status === 200){
                this.userTableData = res.data.data.records

                //赋值数据条数
                this.pageInfo.count = res.data.data.total
                // console.log(this.userTableData)
              }else{
                this.$notify.error({
                  title: '错误',
                  message: '用户数据获取失败'
                });
              }
            })
            // 关闭弹窗
          this.userEditorVisible = false
          }else{
            this.$notify.error({
              title: '错误',
              message: '角色删除失败！'
            });
          }
        })
      }
    }
  }
</script>

<style>
  .home-breadcrumb{
    width: 100%;
    height: 30px;
    line-height: 30px;
    margin: 5px;
    font-family: "华文新魏 Bold", "华文新魏";
  }
.uset-div{
    padding: 20px;
    background-color: #FFFFFF;
    border-radius: 8px;
  }
  .uset-title{
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 40px;
    margin: 10px 0px;
    color: #409EFF;
    font-size: 18px;
  }
  .uset-pagination{
    height: 50px;
    line-height: 50px;
    width: 100%;
    text-align: end;
    margin-top: 25px;
  }
</style>
